<template>
  <div>
    <van-nav-bar title="新增地址" left-arrow @click-left="onClickLeft" />
    <div style="padding:0 0.5rem">
      <label>姓名:</label>
      <input type="text" v-model="ipt1" style="border:0;marging-top:.4rem 0 0 .1rem;" />
      <hr />
      <label>电话:</label>
      <input type="text" v-model="ipt2" style="border:0;marging-top:.4rem 0 0 .1rem;" />
      <hr />
      <label>地址:</label>
      <input type="text" v-model="ipt3" style="border:0;marging-top:.4rem 0 0 .1rem;" />
      <hr />
      <label>邮编:</label>
      <input type="text" v-model="ipt4" style="border:0;marging-top:.4rem 0 0 .1rem;" />
      <hr />
      <button @click="save()">保存</button>
      <button @click="del()">删除</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ipt1: "",
      ipt2: "",
      ipt3: "",
      ipt4: "",
      arr: [],
      json: "",
      adres: {
        a: "",
        b: "",
        c: "",
        d: ""
      }
    };
  },

  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    save() {
      this.json = localStorage.getItem("adres");
      this.addres = {
        a: this.ipt1,
        b: this.ipt2,
        c: this.ipt3,
        d: this.ipt4
      };

      if (
        this.ipt1 == "" ||
        this.ipt2 == "" ||
        this.ipt3 == "" ||
        this.ipt4 == ""
      ) {
        alert("请填写完整信息");
      } else {
        if (this.json) {
          this.arr = JSON.parse(this.json);
          this.arr.push(this.addres);
          localStorage.setItem("adres", JSON.stringify(this.arr));
        } else {
          this.arr = [this.addres];
          localStorage.setItem("adres", JSON.stringify(this.arr));
        }
        this.ipt1 = "";
        this.ipt2 = "";
        this.ipt3 = "";
        this.ipt4 = "";
        this.$router.push("/adres");
      }
    },
    del() {
      this.ipt1 = "";
      this.ipt2 = "";
      this.ipt3 = "";
      this.ipt4 = "";
    }
  }
};
</script>
<style scoped>
</style>
